<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/five.css">
</head>

<body>
    <div class="root">
        <div><img id="one" src="./创家盛典/images/pagefive/tamen.png" alt=""></div>
        <img id="r1" src="../创家盛典/images/pagefive/1.jpg" alt="">
        <img id="r2" src="../创家盛典/images/pagefive/2.jpg" alt="">
        <img id="r3" src="../创家盛典/images/pagefive/3.jpg" alt="">
        <img id="r4" src="../创家盛典/images/pagefive/4.jpg" alt="">
        <img id="r5" src="../创家盛典/images/pagefive/5.jpg" alt="">
        <img id="r6" src="../创家盛典/images/pagefive/6.jpg" alt="">
        <img id="r7" src="../创家盛典/images/pagefive/7.jpg" alt="">
        <img id="r8" src="../创家盛典/images/pagefive/8.jpg" alt="">
        <img id="r9" src="../创家盛典/images/pagefive/9.jpg" alt="">
        <img id="r10" src="../创家盛典/images/pagefive/10.jpg" alt="">
    </div>
    <img id="bottom" src="./创家盛典/images/pagefive/tap.png" alt="">
    <div class="bottom"><img src="./创家盛典/images/pageone/slide.png" alt=""></div>
    <div class="shade">
        <div> <img src="../创家盛典/images/pagefive/01.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/02.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/03.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/04.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/05.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/06.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/07.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/08.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/09.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>
        <div> <img src="../创家盛典/images/pagefive/010.jpg" alt="">
            <img class="fx" src="../创家盛典/images/pagefive/fx.png" alt=""></div>

    </div>
</body>

</html>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/touch-0.2.14.min.js"></script>
<script>
    touch.on(window, "swipeup", function() {
        window.open("./six.html", '_self');
    })
    $("#one").animate({
        left: 2 + "rem"
    }, 500)
    setTimeout(function() {
        $("#r1").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r1").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 9.5 + "rem",
            left: 0.3 + "rem",
        }, 800)
    }, 1000)
    setTimeout(function() {
        $("#r2").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r2").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 6.41 + "rem",
            left: 11.41 + "rem",
        }, 800)
    }, 2500)
    setTimeout(function() {
        $("#r3").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r3").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 8.44 + "rem",
            left: 18.03 + "rem",
        }, 800)
    }, 1300)
    setTimeout(function() {
        $("#r4").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r4").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 17 + "rem",
            left: 12 + "rem",
        }, 800)
    }, 1600)
    setTimeout(function() {
        $("#r5").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r5").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 14.69 + "rem",
            left: 5.72 + "rem",
        }, 800)
    }, 2400)
    setTimeout(function() {
        $("#r6").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r6").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 22.69 + "rem",
            left: 0.03 + "rem",
        }, 800)
    }, 2000)
    setTimeout(function() {
        $("#r7").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r7").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 23.3 + "rem",
            left: 17.3 + "rem",
        }, 800)
    }, 1800)
    setTimeout(function() {
        $("#r8").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r8").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 34.9 + "rem",
            left: 4.16 + "rem",
        }, 800)
    }, 1000)
    setTimeout(function() {
        $("#r9").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r9").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 32.72 + "rem",
            left: 15 + "rem",
        }, 800)
    }, 1900)
    setTimeout(function() {
        $("#r10").animate({
            height: 4.8 + "rem",
        }, 800)
        $("#r10").animate({
            width: 4.8 + "rem",
            height: 5.8 + "rem",
            top: 25.5 + "rem",
            left: 9.78 + "rem",
        }, 800)
    }, 2000)

    function dm() {

        $(".bottom img").animate({
            bottom: 3 + "rem",
            opacity: 1
        }, 500, )

        $(".bottom img").animate({
            bottom: 2 + "rem"
        }, 500)
        $("#bottom").animate({
            opacity: 0
        }, 500)
        $("#bottom").animate({
            opacity: 1
        }, 1000)

    };
    setTimeout(function() {
            setInterval(dm, 1000);
        }, 3000)
        // 点击事件
    var index = 0;
    $(".root img:gt(1)").click(function() {
            index = $(this).index();
            $(".shade div").eq(index - 1).css({
                margin: "auto",
                display: "block",

            })
            $(".shade div").eq(index - 1).siblings().css({
                margin: "0",
                display: "none",

            })
            $(".shade div").eq(index - 1).animate({
                width: 20.4 + "rem",
                height: 30 + "rem",
                top: 5 + "rem",
                right: 0,
                left: 0,
            }, 1000)
        })
        // 关闭事件
    $(".fx").click(function() {
        var t = $(".root img").eq($(this).index()).position().top;
        var l = $(".root img").eq($(this).index()).position().left;
        console.log(t);
        console.log($(".fx"))
        console.log($(this).index());
        console.log($(".root img").eq($(this).index()));
        console.log($(".shade div").eq($(this).index() + 1))
        $(".shade div").css({
            margin: "0",
            display: "none",
        })
        $(".shade div").eq($(this).index() - 1).animate({
            width: 2 + "rem",
            height: 3 + "rem",
            top: t,
            right: 0,
            left: l,
        }, 1000)
    })
</script>